<!-- 通风系统 -->
<template>
  <div class="main">
    <div class="table">
      <el-table :data="tabList" class="list">
        <el-table-column prop="Name" label="通风机名称" width="180">
        </el-table-column>
        <el-table-column prop="WindPresssure" label="风压" width="180">
        </el-table-column>
        <el-table-column prop="WindSpeed" label="风速">
        </el-table-column>
        <el-table-column prop="WindRate" label="风量">
        </el-table-column>
        <el-table-column prop="Vibration" label="抖动">
        </el-table-column>
        <el-table-column prop="V" label="电压">
        </el-table-column>
        <el-table-column prop="An" label="电流">
        </el-table-column>
        <el-table-column prop="SpeedPower" label="转速及功率">
        </el-table-column>
        <el-table-column prop="MachineTemp" label="电机定子绕组温度" width="180">
        </el-table-column>
        <el-table-column prop="BearingTemp" label="轴承温度">
        </el-table-column>
        <el-table-column label="报警状态">
          <template slot-scope="scope">
            <span :class="statusleave[scope.row.WarningLevel] + '_color'"></span>
          </template>
        </el-table-column>
        <el-table-column prop="WarningMessage" label="报警事件">
        </el-table-column>
        <el-table-column prop="MonitorDate" label="监测时间">
        </el-table-column>
      </el-table>
    </div>

    <div class="content">
      <!-- 0: 暂停  1: 运行  2: 故障 -->
      <div v-if="system.status === 0" class="item stop">
        <img class="bg" src="../assets/images/air.png">
      </div>
      <div v-if="system.status === 1" class="item run">
        <img class="bg" src="../assets/images/air-green.png">
        <img v-if="system.one === 1" class="one" slot="reference" src="../assets/images/06_通风系统b.gif">
        <img v-if="system.two === 1" class="two" src="../assets/images/06_通风系统b.gif">
      </div>
      <div v-else-if="system.bad === 2" class="item bad">
        <img class="bg" src="../assets/images/air-red.png">
      </div>
    </div>
  </div>
</template>

<script>
  import {
    fanList
  } from '../server/api.js'
  export default {
    data() {
      return {
        // 0正常  1预警  2报警
        statusleave: [
          'green', 'orange', 'red'
        ],
        system: {
          status: 1,
          one: 1,
          two: 1,
          bad: 0
        },
        timer: null,
        tabList: []
      }
    },
    mounted() {
      this.init();
      this.setTimer();
      const timer = setInterval(() => {
        this.system.one = 1;
        this.system.two = 1;
        this.system.bad = 1
      }, 3000);
    },
    methods: {
      setTimer() {
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.init()
          }, 5000)
        }
      },
      async init() {
        const res = await fanList()
        this.tabList = res.data.data
      }
    },
    destroyed: function () {
      clearInterval(this.timer)
    }
  }

</script>

<style lang="scss" scoped>
  .main {
    .table {
      padding: 40px 0px;
      .list {
        width: 90%;
        margin: 0 auto;
      }
    }
    .content {
    width: 1000px;
    height: calc(100vh - 200px);
    margin-top: 40px;
    .item {
      width: 100%;
      height: 100%;
      position: relative;

      .one {
        position: absolute;
        top: 218px;
        left: 958px;
      }

      .two {
        position: absolute;
        top: 376px;
        left: 1118px;
      }
    }
  }
  }

</style>
